<template>
  <el-dialog v-if="load" title="批量修改" v-model="visible" append-to-body :close-on-click-modal="false" :z-index="2000" width="800px" @close="handleClose">
    <el-form label-position="top">
      <div class="grid grid-cols-2 gap-x-3">
        <el-form-item label="计划类型">
          <VSelect v-model="form.plan_type" placeholder="请选择" :options="options.plan_type" class="w-full" />
        </el-form-item>
        <el-form-item label="ASIN">
          <el-input v-model="form.asin" placeholder="请输入" class="w-full" />
        </el-form-item>
        <el-form-item label="国家">
          <VSelect v-model="form.country" placeholder="请选择" :options="options.country" class="w-full" @change="form.delivery_method=null"/>
        </el-form-item>
        <el-form-item label="实际运输方式">
          <VSelect v-model="form.transport_type" placeholder="请选择" :options="options.transport_type" class="w-full" @change="form.delivery_method=null"/>
        </el-form-item>
        <el-form-item label="派送方式">
          <VSelect v-model="form.delivery_method" placeholder="请选择" :options="matchedDeliveryList" class="w-full" />
        </el-form-item>
        <el-form-item label="预计发货日期">
          <el-date-picker v-model="form.deliver_time" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
        </el-form-item>
        <el-form-item label="发货仓">
          <VSelect v-model="form.shipping_warehouse" placeholder="请选择" :options="options.shipping_warehouse" class="w-full" />
        </el-form-item>
        <el-form-item label="目的仓">
          <VSelect v-model="form.destination_warehouse" placeholder="请选择" :options="options.destination_warehouse" class="w-full" />
        </el-form-item>
        <el-form-item label="备注" class="col-span-2">
          <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" placeholder="请输入" />
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" :loading="loadings.submit" @click="submit">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import api from '../api'
import { ElMessage } from 'element-plus'
import { resMessage } from '@/utils/res'

const props = defineProps({
  options: { type: Object, default: () => ({}) },
})
const {options} = toRefs(props)
const emit = defineEmits(['close', 'success'])

const load = ref(false)
const visible = ref(false)
let loadings = reactive({})
const form = ref({})


// 打开弹窗
const open = async (dp_ids) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  loadings = reactive({})
  form.value = { dp_ids }
  visible.value = true
}

const matchedDeliveryList = computed(() => {
  const { transport_type, country } = form.value;
  const { processDeliveryMethod = [] } = options.value;
  if (!transport_type && !country) {
    return processDeliveryMethod.flatMap(item => 
      item.delivery_method.map(m => ({ label: m.name, value: m.id }))
    );
  }
  const matchedItem = transport_type
    ? processDeliveryMethod.find(d => d.id === transport_type)
    : null;
  if (transport_type && !matchedItem) return [];
  const deliveryMethods = matchedItem ? matchedItem.delivery_method : 
    processDeliveryMethod.flatMap(item => item.delivery_method);
  return deliveryMethods
    .filter(m => !country || m.country.includes(country))
    .map(m => ({ label: m.name, value: m.id }));
});

// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}
// 提交
const submit = () => {
  loadings.submit = true
  api.batchEdit(form.value).then(res => {
    resMessage({
      res,
      success: () => {
        ElMessage.success('操作成功')
        emit('success')
      }
    })
  }).finally(() => {
    loadings.submit = false
    close()
  })
}

defineExpose({ open })
</script>